/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useRef } from 'react';
import {
  DrawerForm,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  ProFormDependency,
} from '@ant-design/pro-form';
import { useSelector } from 'umi';
import { getLeagueOptions } from '@/components/_pages/jdk/index.config';
import type { ConnectState } from '@/models/connect';
import type { ProFormInstance } from '@ant-design/pro-form';
import type { LEAGUE_COLUMNS } from '../../..';
import KbAddressSelect from '../KbAddressSelect';
import { Form } from 'antd';

type KbEditLeagueProps = {
  visible: boolean;
  record: LEAGUE_COLUMNS;
  onSubmit: (values: formValues, addressList: string[]) => Promise<void>;
  onClose: () => void;
};

type formValues = {
  league_name: string;
  phone: string;
  contact_phone: string;
  contact_name: string;
  level: string;
  agent_area_code: string[];
  address: string[];
  detail: string;
};

const KbEditLeague: React.FC<KbEditLeagueProps> = (props) => {
  const { visible, record = {} as LEAGUE_COLUMNS, onSubmit, onClose } = props;

  const formRef = useRef<ProFormInstance>();

  const { winSize } = useSelector((state: ConnectState) => state.global);
  // const [level, setLevel] = useState<number>(0);

  const handleSubmit = async (values: formValues) => {
    const { address } = values;
    if (onSubmit) {
      onSubmit(values, address);
    }
  };

  const handleClose = () => {
    onClose();
  };

  return (
    <DrawerForm
      title='添加/修改加盟商'
      formRef={formRef}
      width={winSize === 'xs' ? '80%' : 500}
      visible={visible}
      labelAlign='left'
      layout='horizontal'
      labelCol={{
        span: 5,
      }}
      drawerProps={{
        onClose: handleClose,
        destroyOnClose: true,
      }}
      onFinish={(values: formValues) => handleSubmit(values)}
      initialValues={record}
    >
      <ProFormText
        name='league_name'
        label='服务商名称'
        placeholder='输入服务商名称'
        rules={[{ required: true, message: '请输入服务商名称' }]}
      />
      <ProFormText
        name='phone'
        label='账号'
        placeholder='输入账号'
        rules={[
          { required: true, message: '请输入服务商账号' },
          { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确手机号' },
        ]}
      />
      <ProFormText
        name='contact_phone'
        label='联系电话'
        placeholder='输入联系电话（可与账号一致）'
        rules={[
          { required: true, message: '请输入服务商账号' },
          { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确手机号' },
        ]}
      />
      <ProFormText
        name='contact_name'
        label='联系人'
        placeholder='输入联系人'
        rules={[{ required: true, message: '请输入联系人' }]}
      />
      <ProFormDependency name={['level']}>
        {({ level }) => (
          <>
            <ProFormSelect
              name='level'
              label='等级'
              placeholder='选择等级'
              disabled={record.account_type == 2}
              options={getLeagueOptions()}
              allowClear={false}
              fieldProps={{
                onChange: () => {
                  formRef.current?.setFieldsValue({
                    agent_area: [],
                  });
                },
              }}
              rules={[{ required: true, message: '请输入等级' }]}
            />
            <Form.Item
              name='agent_area'
              label='区域信息'
              rules={level == 4 ? [] : [{ required: true, message: '请输入区域信息' }]}
            >
              <KbAddressSelect
                multiple
                level={level}
                allowClear={false}
                disabled={level == 4 || record.account_type == 2}
                placeholder='请选择区域信息'
              />
            </Form.Item>
          </>
        )}
      </ProFormDependency>
      <Form.Item
        name='address'
        label='公司地址'
        rules={[{ required: true, message: '请输入公司地址' }]}
      >
        <KbAddressSelect />
      </Form.Item>
      <ProFormTextArea
        name='detail'
        placeholder='请填写详细地址'
        rules={[{ required: true, message: '请填写详细地址' }]}
      />
      <div style={{ color: 'red' }}>
        注：用户登录密码初始密码，默认手机后6位，登录账号后自行修改
      </div>
    </DrawerForm>
  );
};

export default React.memo(KbEditLeague);
